<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">累加</button>
    <button @click="destroy">卸载</button>
    <Header :count="count" />
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    destroy() {
      this.$destroy();
    },
  },
  components: {
    Header,
  },

  beforeCreate() {
    console.log("!!beforeCreate!!");
  },

  created() {
    console.log("!!created!!");
  },

  beforeMount() {
    console.log("!!beforeMount!!");
  },

  mounted() {
    console.log("!!mounted!!");
  },

  beforeUpdate() {
    console.log("!!beforeUpdate!!");
  },

  updated() {
    console.log("!!updated!!");
  },

  beforeDestroy() {
    console.log("!!beforeDestroy!!");
  },

  destroyed() {
    console.log("!!destroyed!!");
  },
};
</script>

<style>
</style>